<template>
	<view class="waterfall-item-container">
		<view class="waterfall-item " @click="onTap">
            <view class="relative">
                <image lazy-load :src="params.src" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
                <view class="line-start">
                    {{params.startcity?params.startcity[params.startcity.length-1].name:''}}出发
                </view>
            </view>

            <view class="two-info wlkflex align-content-between wrap bgw">
                <view class="wd100">
                    <view class="u-line-2 title col3">{{params.title}}</view>
                    <view class="u-line-1 desc">{{params.desc}}</view>
                    <view class="wlkflex tags">
                        <view class="tags-item" v-for="(tag,i) in params.tagids" v-if="i<2">
                            <u-tag :text="tag.name" plain size="mini" :color="themeColor" :borderColor="themeColor" ></u-tag>
                        </view>
                    </view>
                </view>
                <view class="wd100 price-info">
                    <block v-if="params.minprice>0">
                        <span>￥</span>
                        <span class="price">{{params.minprice}}</span>
                        <span class="ml05">起</span>
                    </block>
                    <block v-else>
                        <span class="col9">暂无库存</span>
                    </block>
                </view>

            </view>

		</view>
	</view>
</template>

<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		name:"helangWaterfallItem",
		options:{
			virtualHost: true
		},
		props:{
			params:{
				type: Object,
				default(){
					return {}
				}
			},
			tag:{
				type:String | Number,
				default:''
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data() {
			return {
				
			};
		},
        computed: {
            ...mapGetters(['themeColor'])
        },
		methods:{
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item-container').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height",height,this.$props.tag);
				}).exec();
			},
			onTap(){
				this.$emit("click",this.$props.index,this.$props.tag);
			}
		}
	}
</script>

<style lang="scss" scoped>
    .waterfall-item {
        /*padding: 16rpx;*/
        background-color: #fff;
        border-radius: 4px;
        color: #666;
        .line-start{
            position: absolute;
            left: 0;
            top: 0;
            font-size: $font-sm;
            background-color: rgba(0,0,0,0.18);
            border-radius:4px 0 4px 0;
            padding: 6rpx 10rpx;
            color: #FFFFFF;
        }
        image{
            display: block;
            width: 100%;
            // 默认设置一个图片的大约值
            height: 350rpx;
        }
        .two-info{
            padding: 20rpx 20rpx 20rpx 20rpx;
            pointer-events: none;
            .title{
                font-weight: bold;
                font-size: $font-lt;
            }
            .desc{
                font-size: $font-sm;
                color: #999999;
                margin-top: 4rpx;
            }
            .tags{
                margin-top: 8rpx;
                .tags-item{
                    margin-right: 10rpx;
                }
            }
            .price-info{
                color: #f4710e;
                font-size: $font-base;
                padding-top: 16rpx;
                .price{
                    font-size: $font-max;
                }
            }
        }
    }
</style>
